import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import DeskBig from './DeskBig'
import DeskSmall from './DeskSmall'
import './style.less'

const mapStateToProps = (state) => {
  return {
    chooseCreateGameData: state.group.chooseCreateGame,
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup,
    currentGroupRules: state.group.currentGroupRules,
    currentSelectedGroupRule: state.group.currentSelectedGroupRule,
    gameData: state.app.gameData,
    currentTables: state.group.currentTables,
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    switchCurrentRule: (current) => {
      dispatch(global.allActions.groupActions.currentSelectedGroupRule(current))
    },
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg)),
    queryCurrentGroupRules: () => dispatch(global.allActions.groupActions.queryCurrentGroupRules)
  }
}

const SwitchRuleItem = (props) => {
  const {isCurrent, rule, switchCurrentRule, close} = props
  const {name, icon, config} = rule.gameConf
  const content = JSON.parse(rule.jsonContent)
  const payInfo = rule.gameConf.config.find(conf => conf.name === '支付方式')
  content.payType = content.payType == 3 ? 2 : 1;
  const payLabelInfo = payInfo.choice.find(cho => cho.value === content.payType)
  const turns = config[0].choice.find(ch => ch.value === content.turns)
  return <div className="switch-item pure-g v-center">
    <div className="pure-u-5-24 text-center vh-center">
      <img className="switch-game-icon" src={icon} alt=""/>
    </div>
    <div className="pure-u-14-24">
      <div>{name}</div>
      <div>{turns.label}<span className="light-orange">({payLabelInfo.label})</span></div>
    </div>
    <div className="pure-u-5-24">
      {
        isCurrent ? null : <img onClick={() => {
          switchCurrentRule(rule)
          close()
        }} className="full-width mtr-2" src="img/groupNew/switch-rule.png?v=20181201" alt=""/>
      }
    </div>
  </div>
}

const SwitchRule = (props) => {
  const {close, currentGroupRules, currentSelectedGroupRule, switchCurrentRule} = props
  return <div className="dialog-block has-mask full" >
      <div className="rules-content content">
        <div className="full-width v-center switch-rule-title">
          <div className="h-center column mlr-5">
            <span className="bigger-font">群玩法</span>
            <span className="bigger-font grey">群房间: 仅俱乐部成员可以加入</span>
          </div>
          <img onClick={close} className="table-close mrr-3" src="img/groupNew/close.png?v=20181201" alt=""/>
        </div>
        <div className="modal-wrapper v-scroll">
          {/* <SwitchRuleItem></SwitchRuleItem> */}
          {
            currentGroupRules.map(rule => {
              const isCurrent = rule.id === currentSelectedGroupRule.id
              return <SwitchRuleItem key={rule.id} rule={rule} isCurrent={isCurrent}
               switchCurrentRule={switchCurrentRule} close={close}></SwitchRuleItem>
            })
          }
        </div>
      </div>
    </div>
}

class All extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showSwitch: false
    }
  }

  public componentDidMount() {
    this.queryInterval = setInterval(() => this.props.queryCurrentGroupRules(), 5000)
  }

  public componentWillUnmount() {
    clearInterval(this.queryInterval)
  }

  bigTableGameTypes: Array<number> = [1, 2, 4, 5, 6]
  tableCounts: number = 8
  queryInterval: number

  switchRule() {
    this.setState({
      showSwitch: !this.state.showSwitch
    })
  }

  deskJoin(index, tableData) {
    console.log('deskJoin', index);
    const ruleId = this.props.currentSelectedGroupRule.id
    const roomNo = tableData.data ? tableData.data.roomNo : -1
    const url = `${config.pre}/crowd/room/${Cookies.get('areaCode')}/${ruleId}/${index}/${roomNo}`
    const opt = {
      method: 'GET'
    }
    fetchJson(url, opt).then(data => {
      console.log(data)
      if (data.result) {
        this.props.openModal(data.message)
        return
      } else {
        window.location.href = data.data
      }
    })
  }

  getFilledTables() {
    const tables = []
    console.log(this.props.currentTables)
    for (let i = 0; i < this.tableCounts; i++) {
      let exist = this.props.currentTables.find(current => current.confIndex === i)
      if (exist) {
        tables.push({
          isEmpty: false,
          data: exist
        })
      } else {
        tables.push({
          isEmpty: true,
          data: null
        })
      }
    }
    return tables
  }

  public render() {
    const {chooseCreateGameData, currentSelectedGroupRule, currentGroupRules, gameData, switchCurrentRule} = this.props
    const {showSwitch} = this.state
    const currentGameConf = gameData.find(conf => conf.gameId === currentSelectedGroupRule.gameType) || {}
    const isBigTable = this.bigTableGameTypes.some(type => type === currentSelectedGroupRule.gameType)
    const filledTables = this.getFilledTables()
    console.log('filledTables', filledTables);
    return <div className="view-page group-view">
      <div className="inner-header biger v-center add-top room-table-header pure-g">
        <div className="add-rule-tips pure-u-3-4">
          <img className="full-height one-line mlr-5" src={currentGameConf.icon} alt=""/>
          <span>{currentGroupRules.confName}({currentGameConf.name})</span>
        </div>
        <div className="add-rule-tips vh-center pure-u-1-4">
          <div onClick={this.switchRule.bind(this)}>切换玩法</div>
          <img className="add-rule-arrow" src="img/groupNew/ARROW.png?v=20181201" alt=""/>
        </div>
      </div>
      <div className="alltable-body">
        <div className="table-content v-scroll" id="table-content-id">
          {
            filledTables.map((table, index) => {
              return isBigTable ? <DeskBig key={index} deskJoin={this.deskJoin.bind(this, index, table)} data={table} index={index}></DeskBig> :
              <DeskSmall key={index} deskJoin={this.deskJoin.bind(this, index, table)} data={table} index={index}></DeskSmall>
            })
          }
        </div>
        {/* {
          (() => {
            const renderTable = []
            for (let i = 0; i < this.tableCounts; i++) {
              let tabel = isBigTable ? <DeskBig key={i} deskJoin={this.deskJoin.bind(this, i)}></DeskBig> : <DeskSmall key={i} deskJoin={this.deskJoin.bind(this, i)}></DeskSmall>
              renderTable.push(tabel)
            }
            return renderTable
          })()
        } */}
      </div>
      {
        showSwitch ? <SwitchRule close={this.switchRule.bind(this)}
         currentGroupRules={currentGroupRules}
         currentSelectedGroupRule={currentSelectedGroupRule}
         switchCurrentRule={switchCurrentRule}></SwitchRule> : null
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(All)